<template>
  <div class="market-tag-relationship" v-loading="loading" :style="{ height: documentClientHeight - 150 + 'px' }">
    <template v-if="relationList.nodes.length">
      <el-row>
        <el-col :span="24" align="center">
          <span class="legend" v-for="item in nodeColor" :key="item.type" :style="{ color: item.color }">
            <span :style="{ 'background-color': item.color }"></span>
            <label>{{ item.name }}</label>
          </span>
        </el-col>
      </el-row>
      <div id="tag-relation" class="mount-node"></div>
    </template>
    <div class="mount-node" v-else>
      <div class="relation-tips">
        <icon-svg name="iconConnection"></icon-svg><br />
        <p>暂无血缘关系</p>
      </div>
    </div>
  </div>
</template>

<script>
import G6 from '@antv/g6'
export default {
  props: {
    assetId: {
      type: String,
      required: true,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      relationList: {
        nodes: [],
        edges: []
      },
      graph: null,
      nodeColor: [
        { name: '基础标签', type: 1, color: '#5470c6' },
        { name: '标签运算类衍生标签', type: 2, color: '#91cc75' },
        { name: 'SQL创建类衍生标签', type: 3, color: '#fac858' },
        { name: '逻辑分群类衍生标签', type: 4, color: '#e66' },
        { name: '单一型指标类衍生标签', type: 5, color: '#73c0de' },
        { name: '复合型指标类衍生标签', type: 6, color: '#3ba272' },
        { name: '交叉型指标类衍生标签', type: 7, color: '#fc8452' },
        { name: '比率型指标类衍生标签', type: 8, color: '#9a60b4' },
        { name: '客群画像', type: 9, color: '#ea7ccc' }
      ]
    }
  },
  computed: {
    documentClientHeight: {
      get() {
        return this.$store.state.common.documentClientHeight - 90
      }
    }
  },
  methods: {
    getInfo() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl(`index/supermarket/queryAssetBloodRelationship/${this.assetId}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          // 成功后执行的操作，返回数据在data.data中
          const relations = JSON.parse(data.data)
          this.relationList.nodes = relations.nodeList
          this.relationList.edges = relations.edgeList
          this.$nextTick(() => this.initGraph())
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    initGraph() {
      if (this.graph && !this.graph.destroyed) {
        this.graph.destroy()
        this.graph = null
      }
      const container = document.getElementById('tag-relation')
      const width = container.scrollWidth
      const height = container.scrollHeight
      this.graph = new G6.Graph({
        container: 'tag-relation',
        width: width,
        height: height,
        fitView: true,
        modes: {
          default: [
            'drag-canvas',
            'drag-node',
            'zoom-canvas',
            {
              type: 'tooltip',
              formatText: function(model) {
                return model.fieldNm
                  ? `<p style="padding: 10px 20px;border:1px solid rgba(219, 208, 254);background-color: #fff;">
                ${model.fieldNm}
                </p>`
                  : ''
              }
            }
          ]
        },
        defaultNode: {
          size: 16
        },
        defaultEdge: {
          size: 1,
          style: {
            stroke: '#A3B1BF',
            endArrow: {
              path: 'M 0,0 L 8, 4 L 8, -4 Z',
              fill: '#e2e2e2'
            }
          },
          labelCfg: {
            autoRotate: true,
            refY: 8
          }
        },
        layout: {
          type: 'dagre',
          rankdir: 'LR',
          align: 'DL',
          nodesepFunc: () => 15,
          ranksepFunc: () => 20
        }
      })

      this.graph.node(node => {
        return {
          size: 26,
          style: {
            fill: this.setColor(node.assetType)
          },
          id: node.assetId,
          label: node.assetNm,
          labelCfg: {
            position: 'bottom',
            offset: 10
          }
        }
      })

      this.graph.data(this.relationList)
      this.graph.render()
      this.graph.fitView([height * 0.15, width * 0.1])

      window.addEventListener('resize', () => {
        if (!this.graph || this.graph.destroyed) return
        if (!container || !container.scrollWidth || !container.scrollHeight) return
        this.$nextTick(() => this.initGraph())
      })
    },
    setColor(type) {
      const node = this.nodeColor.find(item => item.type === type)
      return node.color
    }
  },
  beforeDestroy() {
    if (this.graph && !this.graph.destroyed) {
      this.graph.destroy()
      this.graph = null
    }
  }
}
</script>

<style lang="scss">
.market-tag-relationship {
  .mount-node {
    height: calc(100% - 40px);
    margin-top: 10px;
    position: relative;
  }
  .legend {
    display: inline-block;
    margin: 20px 20px 0 0;
    span {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 5px;
      border-radius: 50%;
      vertical-align: middle;
    }
  }
  .relation-tips {
    font-size: 18px;
    text-align: center;
    margin-top: -20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: $theme-color;
    svg {
      width: 40px;
      height: 40px;
      margin-bottom: 10px;
    }
  }
}
</style>
